<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://cdn.bootcss.com/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
    <style>
        .header {
            margin-bottom: 100px;
        }
        .header>.fixed{
            position:absolute;
            right: 20px;
            top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
    
        <template>
            <header class="header">
                <h1>211寝室结账信息(寝室成员扫码查看小程序)</h1>
                <div class="demo-image__placeholder fixed" >
                    <div class="block">
                        <!-- <span class="demonstration">寝室成员扫码查看小程序</span> -->
                        <el-image :src="src">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                    </div>
                </div>
            </header>
            <el-button @click="resetDateFilter">清除日期过滤器</el-button>
            <el-button @click="clearFilter">清除所有过滤器</el-button>
            <el-table ref="filterTable" :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期" sortable width="180" column-key="date" :filters="checkoutTime"
                    :filter-method="filterHandler">
                </el-table-column>

                <el-table-column prop="BED_A" label="A床-孙睿哲">
                </el-table-column>
                <el-table-column prop="BED_B" label="B床-吴家栋">
                </el-table-column>
                <el-table-column prop="BED_C" label="C床-孙煜海">
                </el-table-column>
                <el-table-column prop="BED_D" label="D床-朱志康">
                </el-table-column>
                <el-table-column prop="BED_E" label="E床-谢卓君">
                </el-table-column>
                <el-table-column prop="bill" label="账单">
                </el-table-column>
                <el-table-column prop="note" label="备注">
                </el-table-column>
                <!-- <el-table-column prop="tag" label="标签" width="100"
                    :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag"
                    filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>
                            {{scope.row.tag}}
                        </el-tag>
                    </template>
                </el-table-column> -->
            </el-table>
      <footer>
        
      </footer>
        </template>
    </div>

</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                src: './img/applet.png',
                tableData: [{
                    date: '2021/10/1',
                    duration: "2021/9/6-2021/10/1",
                    // tag: '家',
                    BED_A: "0",
                    BED_B: "10",
                    BED_C: "10",
                    BED_D: "30",
                    BED_E: "300",
                    bill:`朱志康给谢卓君40.00元;孙煜海给谢卓君60.00元;吴家栋给谢卓君60.00元;孙睿哲给谢卓君70.00元;`,
                    note: ""
                },
                {
                    date: '2021/10/31',
                    duration: "2021/10/6-2021/10/28",
                    // tag: '家',
                    BED_A: "10",
                    BED_B: "10",
                    BED_C: "0",
                    BED_D: "36",
                    BED_E: "100",
                    bill:`吴家栋给朱志康4.80元;吴家栋给谢卓君16.40元;孙睿哲给谢卓君21.20元;孙煜海给谢卓君31.20元;`,
                    note: "由于D的35.8出错，将35.8改为36"
                }]
                , checkoutTime: [
                    { text: '2021/10/1', value: '2021/10/1' },
                    { text: '2021/10/31', value: '2021/10/31' },
                ]
            }
        },
        methods: {
            resetDateFilter() {
                this.$refs.filterTable.clearFilter('date');
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            }
        }
    })
</script>

</html>